<!--  -->
<script setup>
import ResizeBar from '@/components/ResizeBar.vue'
import { useBreadsStore } from '@/stores'
import { getQuestListAPI, getHottestQuestListAPI } from '@/apis/quest'
import { RouterLink } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import RankSwitcher from '@/components/RankSwitcher.vue'
import QuestList from '@/components/QuestList.vue'
import IconLabel from '@/components/IconLabel.vue'

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([{ title: '问题列表' }])

const route = useRoute()
const router = useRouter()
const initOrder = route.query.order || 'newest'
const data = ref([])
const popular = ref([])

onMounted(() => {
  retrieveData(route.query.order || 'newest')
  getHottestQuestListAPI().then(res => {
    popular.value = res.data.records
  }).catch(() => null)
})

const orderType = [
  { title: '最新', order: 'newest' },
  { title: '最热', order: 'hot' },
  { title: '待解决', order: 'unsolved' },
  { title: '已解决', order: 'solved' }
]

const moreOrderType = [
  { title: '最多浏览', order: 'mostView' },
  { title: '最多点赞', order: 'mostLike' },
  { title: '最多回答', order: 'mostAnswer' },
]

function onSwitchOrder(type) {
  router.push({ query: { order: type } })
  retrieveData(type)
}

function retrieveData(order) {

  getQuestListAPI({ pageNo: 0, pageSize: 10, order }).then(res => {
    data.value = res.data.records
  }).catch(() => null)
}

</script>

<template>
  <div class="view-container">
    <div class="main-wrapper">
      <div class="header">
        <div>全部问题</div>
        <RankSwitcher :init-type="initOrder" :order-type="orderType" :more-order-type="moreOrderType"
          @on-switch-order="onSwitchOrder" />
      </div>
      <div class="body">
        <div v-if="!data.length" class="empty">空的</div>
        <QuestList v-else :data="data"></QuestList>
      </div>
      <div class="footer">

      </div>
    </div>
    <div class="right-wrapper">
      <div class="card">
        <div class="card-topic">热门问题</div>
        <div class="card-item" v-for="item in popular" :key="item.id">
          <RouterLink :to="`/question/${item.id}`">
            <div class="item-title">{{ item.title }}</div>
            <IconLabel class="item-info" v-if="item.acceptedAnswerId" icon-name="answer">
              {{ item.answerCount }} 个回答
            </IconLabel>
          </RouterLink>
        </div>
      </div>
      <ResizeBar position="left" :max="300" :min="200" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.view-container {
  display: flex;
  justify-content: space-between;
  min-height: 100%;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 1em;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1em;
    border-bottom: 1px dashed var(--border-secondary);

    .rank-container {
      display: flex;
      align-items: center;
      border: 1px solid var(--border-secondary);
      border-radius: 2px;
      border-right: 0;

      .rank-item {
        padding: 4px 6px;
        border-right: 1px solid var(--border-secondary);
        cursor: pointer;
      }
    }
  }

  .body {
    flex: 1;
    padding: 1em 0;
  }

  .footer {}
}

.right-wrapper {
  position: relative;
  width: 300px;
  border-left: 1px dashed var(--border-secondary);
  padding: 0 1em;

  .card {
    border: 1px solid var(--border-secondary);
    border-bottom: 0;
    border-radius: 2px;

    .card-topic {
      padding: 1em;
      background-color: #d9e7d9;
      border-bottom: 1px solid var(--border-secondary);
    }

    .card-item {
      padding: 5px 1em;
      border-bottom: 1px solid var(--border-secondary);

      &:hover {
        background-color: var(--bgc-primary);
      }

      .item-title {
      }

      .item-info {
        border-top: 1px solid var(--bgc-primary);
        margin-top: 5px;
        padding-top: 5px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
